{include file="public/header" /}

<body>
<div class="layui-fluid">


    <div class="layui-card" >

        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-userfront-formlist">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">角色名</label>

                    <div class="layui-input-block">
                        <input class="layui-input" name="rolename" id="rolename" autocomplete="off">
                    </div>

                </div>

                <a class="layui-btn" data-type="reload" id="reload">搜索</a>
                <a class="layui-btn layuiadmin-btn-role layuiadmin-btn-admin layui-btn-normal" data-type="add" >添加</a>
            </div>

        </div>

        <!--<script type="text/html" id="toolbarDemo">-->
            <!--<div class="layui-btn-container">-->
                <!--<a class="layui-btn layuiadmin-btn-role" lay-event="add" >添加</a>-->
            <!--</div>-->
        <!--</script>-->

        <script type="text/html" id="operation">

            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editRole">权限设置</a>
        </script>

        <table class="layui-table" id="tableEvent" lay-data=""  lay-filter="tableEvent">

        </table>

    </div>


</div>


<!--权限设置开始-->
<form class="layui-form" action="" id="roleform" lay-filter="roleform" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="rolename2" lay-verify="required|rolename2" readonly autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="descr" id="descr" class="layui-textarea"></textarea>
        </div>
    </div>
    <table class="layui-table" id="tableRole" lay-data=""  lay-filter="tableRole"><!--动态加载--></table>
    <!--<div class="layui-form-item">-->
    <!--<div class="layui-input-block">-->
    <!--<input type="hidden" name="roleid" id="roleid2" value="" class="layui-input">-->
    <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="savedata2">保存</button>-->
    <!--<button type="reset" class="layui-btn layui-btn-primary" id="reset2">重置</button>-->
    <!--</div>-->
    <!--</div>-->
</form>
<!--权限设置结束-->


<form class="layui-form" action="" id="myform" lay-filter="example" style="display: none">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-inline">
                <input type="text" name="rolename" lay-verify="required|rolename" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="roleid" id="roleid" value="" class="layui-input">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="savedata">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
        </div>
    </div>
</form>
{include file="public/footer" /}
<script>
    layui.use(['laydate','table','form', 'layer','element', 'jquery'], function(){
        var $ = layui.$
            ,table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate;
        form.render();

        var rolename =$("#rolename").val();
        table.render({
            elem: '#tableEvent'
            //,height: 312
            ,url: "{:url('Sysrole/ajaxGetSysRole')}" //数据接口
            ,page: true
            ,where:{rolename:rolename}    //向后台传递参数
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,parseData: function(res){ //res 即为原始返回的数据
                return res;

            },cols: [[ //表头
                {align:'center',field: 'id', title: '序号'}
                ,{align:'center',field: 'rolename', title: '角色'}
                ,{align:'center',fixed: 'right', title:'操作',toolbar: '#operation',unresize: true}
            ]]
            ,id: 'testReload'
            ,done: function(res, curr, count){

            }
        });
        //监听状态操作
        form.on('switch(startDemo)', function(obj){

            if(obj.elem.checked){
                layer.tips('启用', obj.othis);
                var data = {id:this.value,status:1,type:'edit'}
            }else{
                layer.tips('停用', obj.othis);
                var data = {id:this.value,status:0,type:'edit'}
            }
            ajaxSavedata(data,table,'status')
        });
        //监听行工具事件
        table.on('tool(tableEvent)', function(obj){

            if(obj.event === 'del'){
                var msg = "真要删除用户（"+obj.data.rolename+"）吗？";
                layer.confirm(msg, function(index){
                    var id = obj.data.id
                    var updata = {id:id,type:obj.event}
                    //console.log(obj.data);
                    ajaxSavedata(updata,table);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                openForm('编辑',form,obj.event,obj.data);
            }
            else if(obj.event === 'editRole'){
                openRoleEdit(form,table,obj.data);
            }

        });

        $('#reload').on('click', function(){
            var rolename =$("#rolename").val();

            table.reload('testReload', {
                where: { //设定异步数据接口的额外参数，任意设
                    rolename: rolename
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        });


        //头工具栏事件
        table.on('toolbar(tableEvent)', function(obj){

            openForm('添加',form,'add','');

        });

        //监听提交
        form.on('submit(savedata)', function(data){

            if(data.field.roleid){
                data.field.id=data.field.roleid
                data.field.type='edit'
            }else {
                data.field.type='add'
            }
            ajaxSavedata(data.field,table);
            return false;
        });

        //事件
        var active = {
            add: function(){
                openForm('添加',form,'','add');
            }
        }

        $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    //权限设置
    function openRoleEdit(form,table,data) {

        var menulist = data.menulist;//当前角色的权限

        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: '权限设置',
            area: ['50%', '90%'],
            shadeClose: false,
            btn : [ '确定', '关闭' ],
            content: $("#roleform"),//引用的弹出层的页面层的方式加载修改界面表单
            success: function (layero) {
                form.val('roleform', {
                    "rolename2": data.rolename,
                    "descr": data.info
                });
                var roleid = data.id;

                table.render({
                    elem: '#tableRole'
                    ,height: 480
                    ,width:'100%'
                    ,url: "{:url('Sysrole/ajaxGetAuthlist')}" //数据接口
                    //,where:{roleid:roleid}
                    ,page: false //开启分页
                    //,limit:1
                    ,cols: [[ //表头
                        {field: 'title', title: '菜单', width:200,templet: function (d) {

                            if(menulist){
                                if(menulist.indexOf(d.id) > -1){

                                    var html = "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+d.id+"' checked> "+d.title;

                                }else{
                                    var html = "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+d.id+"' > "+d.title;

                                }
                            }else{
                                var html = "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+d.id+"' > "+d.title;

                            }


                            return html;
                        }}
                        ,{field: 'children', title: '功能', width:100+'%',templet: function (d) {
                            var child = d.child
                            var str = "";
                            if(child){

                                str +='<div>'
                                str +='     <div class="">'

                                var strhtml = '';
                                for(var i=0; i<child.length; i++){
                                    var title = child[i].title;
                                    var id = child[i].id;

                                    if(menulist){
                                        if(menulist.indexOf(id) > -1){
                                            strhtml += "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+id+"' checked> "+title+' ';

                                        }else{
                                            strhtml += "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+id+"' > "+title+' ';
                                        }
                                    }else{
                                        strhtml += "<input type='checkbox' lay-skin='primary' name='roleauth' lay-filter='checkboxIsSelected'  table-index='"+d.LAY_TABLE_INDEX+"'  value='"+id+"' > "+title+' ';
                                    }


                                }
                                str +=strhtml;

                                str +='     </div>'
                                str +='</div>'
                            }

                            return str;
                        }}

                    ]]
                });

                form.render();

                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象
            },
            yes : function(index, layero) {
                var info = $("#descr").val();
                var checkedstr = '';
                $('input[name="roleauth"]:checked').each(function(){

                    checkedstr +=$(this).val()+',';
                });
                data.info=info;
                data.menulist=checkedstr;
                data.type='edit2';

                ajaxSavedata(data,table,type='')

            }
        });
    }
    function openForm(title,form,type,data) {
        $("#reset").click();//重置表单

        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: title,
            //area: ['420px', '330px'],
            shadeClose: true,
            content: $("#myform"),//引用的弹出层的页面层的方式加载修改界面表单
            success: function (layero) {
                //$("#status").val(data.status);
                form.val('example', {
                    "roleid":data.id
                    ,"rolename": data.rolename
                });
                form.render();


                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象
            }
        });
    }

    function ajaxSavedata(data,table,type='') {

        $.ajax({
            url:"{:url('Sysrole/ajaxSaveRoleData')}",
            data: data,
            type: "POST",
            success: function (e) {
                if(e.code==1){
                    layer.close(layer.index);
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                    layer.msg(e.msg)
                }else{
                    layer.msg(e.msg)
                }

            }

        });

    }

</script>
</body>
</html>
